<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
//是否在注册中
const isregister = ref(false)
import { ref } from 'vue'
const ruleForm = ref({ name: '', pass: '', confirm: '' })
const ruleFormRef = ref()
const validatePass = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请再次确认密码'))
  } else if (value !== ruleForm.value.pass) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
}
const rules = ref({
  name: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { min: 5, message: '用户名不少于5位', trigger: 'blur' }
  ],
  pass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码不少于6位', trigger: 'blur' }
  ],
  confirm: [{ validator: validatePass, trigger: 'blur' }]
})
const handleRegister = async (formEl) => {
  isregister.value = true
  if (!formEl) {
    isregister.value = false
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('提交')
      router.replace('/login')
      isregister.value = false
    } else {
      ElMessage.error('请重新注册')
      isregister.value = false
      console.log('失败', fields)
    }
  })
}
</script>
<template>
  <div class="form_box">
    <div class="form">
      <h3 style="font-family: '清松'; text-align: center">欢迎注册</h3>
      <el-form
        label-position="right"
        label-width="120px"
        style="margin-right: 100px"
        size="large"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="账户名" prop="name">
          <el-input
            placeholder="请输入账户名"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.pass"
          ></el-input>
        </el-form-item>
        <el-form-item type="password" label="确认密码密码" prop="confirm">
          <el-input
            placeholder="请再次确认密码"
            v-model="ruleForm.confirm"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="!isregister"
            type="primary"
            class="btn_form"
            @click="handleRegister(ruleFormRef)"
            >注册</el-button
          >
          <el-button
            v-else
            type="primary"
            class="btn_form"
            @click="handleRegister(ruleFormRef)"
            >注册中</el-button
          >
        </el-form-item>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-left: 100px;
          "
        >
          <el-link style="font-family: '像素字体'" href="/">返回首页</el-link>
          <el-link style="font-family: '像素字体'" href="/login"
            >切换登录</el-link
          >
        </div>
      </el-form>
      <el-image
        src="/assets/register.png"
        style="width: 200px; height: 80px; margin-left: 180px"
      ></el-image>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btn_form {
  font-size: 20px;
  margin: 0 auto;
  font-family: '加油鸭';
}
.form_box {
  margin-top: 50px;
  width: 100%;
  .form {
    padding: 0 30px;
  }
}
</style>
